<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/extras/dialect"
      layout:decorate="layout/layout_authorize"
>
<head>
	<title>授权</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../static/asset/css/base.min.css" th:href="@{/asset/css/base.min.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/common/front.css" th:href="@{/asset/css/common/front.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/back/login.css" th:href="@{/asset/css/back/login.css}"/>
	<style>
		#scope-list {

		}

		#scope-list li {
			height: 31px;
			border: 1px;
			color: #666;
		}

		#scope-list li label {
			display: block;
			float: left;
			height: 100%;
			line-height: 31px;
			margin: 0 0 0 10px;
		}

		#scope-list li input {
			display: block;
			float: left;
			height: 100%;
			width: 13px;
		}

		input[type="checkbox"][readonly] {
			opacity: .5;
		}
	</style>
</head>
<body>
<div layout:fragment="content" class="wrapper">
	<div class="container mt-5">
		<div class="row">
			<div class="col-8 offset-2 jumbotron p-5">

				<div class="container p-0">

					<div class="media">
						<img class="mr-3" src="..." th:src="${client.logo}" style="height: 60px; width: 60px;" width="60" height="60"
						     alt="LOGO">
						<div class="media-body">
							<h5 class="mt-0" th:text="${client.name}">应用名称</h5>
							<th:block th:text="${client.description}">应用描述</th:block>
						</div>
					</div>

					<hr>

					<form id="confirmationForm" name="confirmationForm" action="/oauth/authorize" th:action="@{/oauth/authorize}" method="post">
						<input name="user_oauth_approval" value="true" type="hidden"/>
						<input type="hidden" th:if="${_csrf != null}" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

						<p class="mt-3" style="font-size: 14px;">将允许<span>应用名称</span>进行一下操作：</p>

						<ul id="scope-list" th:remove="all-but-first" class="list-unstyled ml-3" th:if="${!#lists.isEmpty(scopes)}">
							<li th:each="scope:${scopes}">
								<input name="scopes" id="scope-id" value="scope" type="checkbox"
								       th:if="${scope.defaultSelected}"
								       th:id="${'scope' + scopeStat.index}"
								       th:value="${scope.value}"
								       th:readonly="${scope.defaultSelected}"
								       th:checked="${scope.selected}"
								       onclick="return false;" onkeydown="return false;"
								>

								<input name="scopes" id="scope-id" value="value" type="checkbox"
								       th:if="${!scope.defaultSelected}"
								       th:id="${'scope' + scopeStat.index}"
								       th:value="${scope.value}"
								       th:checked="${scope.selected}">

								<label for="scope-id" th:for="${'scope' + scopeStat.index}" th:text="${scope.description}">scope 描述</label>
							</li>
						</ul>

						<hr>
						<div class="text-right">
							<input name="authorize" value="授权" type="submit" class="btn btn-primary col-10 col-sm-3">
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<th:block layout:fragment=" script">
	<script type="text/javascript" src="../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script>
		$(function () {
			$('form').validate({
				errorElement: 'div',
				errorClass: 'form-control-feedback text-danger'
			})
		})
	</script>
</th:block>
</body>
</html>
